<template>

	<el-dialog v-model="dialogDrawer" title="分类管理" width="30%" :before-close="handleClose">
		<el-table :data="articleClassOptions" style="width: 100%" size="small">
			<el-table-column label="分类名称">
				<template #default="scope">
					<div style="display: flex; align-items: center">
						<el-icon>
							<timer />
						</el-icon>
						<el-input v-if="scope.row.isShowInput" size="small"
							@change="onChangeClass(scope.$index, scope.row)"
							@blur="onBlurClass(scope.$index, scope.row)"
							@keyup.enter="onChangeClass(scope.$index, scope.row)"
							 v-model="scope.row.className"
							placeholder="请输入分类名称" />
						<span v-else style="margin-left: 10px">{{ scope.row.className }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template #default="scope">
					<el-button size="small" link type="primary" @click="handleEdit(scope.$index, scope.row)">重命名
					</el-button>
					<el-button size="small" link type="primary" @click="handleDelete(scope.$index, scope.row)">移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-button class="mt-4" style="width: 100%;margin-top: 
	 10px;" type="primary" link @click="onAddItem">添加分类</el-button>
		<template #footer>
			<span class="dialog-footer">
				<el-button size="small" @click="handleClose">关 闭</el-button>
			</span>
		</template>
	</el-dialog>

</template>

<script>
	import {
		toRefs,
		computed,
		reactive,
		watch,
		onMounted,
		ref,
		nextTick,
		defineEmits 
	} from 'vue'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		Timer
	} from '@element-plus/icons-vue'
	import {
		create,
		update,
		remove,
		getAllList
	} from '/@/api/ws/articleClass'


	export default {
		name: 'ArticleClassDetailForm',
		props: {
			dialogDrawer: {
				type: Boolean,
				default: false
			},
			classOptions: {
				type: Array,
				default () {
					return []
				}
			}
		},
		setup(props, context) {
			const state = reactive({
				
			})

			const {
				dialogDrawer,
				classOptions
			} = toRefs(props)
			let articleClassOptions = computed({
				get: () => classOptions.value,
				set: (val) => {
					context.emit('update:classOptions', val)
				}
			})
			const emit = defineEmits(['emitClass']) 
			const handleClose = () => {
				context.emit("update:dialogDrawer", false)
			}
			const sumbitAddClass = () => {
				context.emit("update:dialogDrawer", false)
			}
			const handleEdit = (index, row) => {
				row.isShowInput = true
			}
			const handleDelete = (index, row) => {
				ElMessageBox.confirm(
					'是否确认删除名称为"' + row.className + '"的数据项？',
					'提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					remove(row.id).then(res => {
						if (res.code == 0) {
							ElMessage({
								type: 'success',
								message: '删除成功',
							})
							getArticleClasss()
						} else {
							ElMessage({
								type: 'error',
								message: '删除失败：' + res.message,
							})
						}
					})

				}).catch()
			}
			const onAddItem = (index, row) => {
				articleClassOptions.value.push({
					id: null,
					className: '默认分类',
					isShowInput: true
				})
			}
			const onChangeClass = (index, row) => {
				row.isShowInput = false
				if (row.id) {
					update(row).then(res => {
						row.isShowInput = false
						if (res.code == 0) {
							ElMessage.success("修改成功");
							
						} else {
							ElMessage.error("修改失败");
						}
					})
				}else {
					create(row).then(res => {
						if (res.code == 0) {
							row.id = res.data.id
							ElMessage.success("添加成功");
						} else {
							ElMessage.error("添加失败");
						}
					})

				}
			}
			const onBlurClass = (index, row) => {
				if(row.id == null){
					create(row).then(res => {
						row.isShowInput = false
						if (res.code == 0) {
							row.id = res.data.id
							ElMessage.success("添加成功");
						} else {
							ElMessage.error("添加失败");
						}
					})
				}
				row.isShowInput = false
			}
			const getArticleClasss = () => {
				getAllList().then(res => {
					if (res.code == 0) {
						// console.log( res.data)
						context.emit('update:classOptions', res.data)
						context.emit('emitClass')
						// articleClassOptions.value[0] = res.data
						// console.log(articleClassOptions.value[0] )
						// console.log(articleClassOptions.value)
					}
				})
			}
			return {
				dialogDrawer,
				handleClose,
				sumbitAddClass,
				handleDelete,
				handleEdit,
				onAddItem,
				onChangeClass,
				onBlurClass,
				getArticleClasss,
				articleClassOptions,
				emit,
				...toRefs(state),
				close
			}
		}
	}
</script>

<style>
</style>
